<template>
	<div class="kaoguanguanli" style="background: #edeff0;">
    <top></top>
    <div class="flexcc">
      <img src="../../../static/img2/banner2.png">
    </div>

    <div class="ww " style="margin: 30px auto 0;">
      <div style="margin-bottom: 30px;">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item><a href="/pc/huigu">赛事回顾</a></el-breadcrumb-item>
          <el-breadcrumb-item>{{name}}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="flexb">
        <div style="background: #fff; width: 300px; height: 300px; border-radius: 10px; padding: 30px;">
          <div style="font-weight: bold; font-size: 24px; color: #0048baf2; margin-bottom: 30px;">赛事回顾</div>
          <div class="nav3" :class="search.sort_id == item.id?'nav3li':''" v-for="item in list" :key="item.id" @click="change2(item)">{{item.name}}</div>
        </div>

        <div style="background: #fff; width: 850px; border-radius: 10px; padding: 30px; min-height: calc(100vh - 490px);">
          <div style="font-size: 24px; font-weight: bold; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px #ccc solid;">{{name}}</div>
          <div class="flexbc nav4" v-for="item in list2" :key="item.id" @click="chakanxiangqing(item)">
            <div class="flexc">
              <div style="width: 120px; height: 80px; background: #eaeaea; overflow: hidden;" class="flexcc"><img :src="item.img_url"></div>
              <div style="margin-left: 20px; font-size: 12px; line-height: 30px;">
                <div style="color: #666">{{item.title}}</div>
                <div style="color: #666">{{item.desc}}</div>
                <div style="color: #999;">{{item.create_time}}</div>
              </div>
            </div>
          </div>
          <el-pagination style="text-align: right; padding: 20px;" background layout="prev,pager,next,total" :current-page="search.page" @current-change="fanye" :page-size="search.page_size" :total="total"></el-pagination>
        </div>
      </div>



    </div>
	</div>
</template>

<script>
  import top from '../top.vue'
	export default {
		name: 'kaoguanguanli',
    components:{
      top
    },
		data() {
			return {
        list:[],
        list2:[],
        name:"",
        total:0,
        id:0,
        search:{
          page:1,
          pageSize:20,
          sort_id:0,
          title:""
        }
			}
		},
		created() {
      this.getlist()

		},
		mounted() {

		},
		methods: {
      chakanxiangqing:function(item){
        this.$router.push('/huigu/detail?id='+item.id+'&name='+this.name)
      },
      change2:function(item){
        this.search.sort_id = item.id
        this.name = item.name
        axios.get(this.IP_URL+'/api/review/list',{params:this.search}).then((response)=>{
        	if (response.data.msg.code == 0) {
            this.list2 = response.data.data.data
            this.total = response.data.data.total
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },
      getlist:function(){
        axios.get(this.IP_URL+'/api/sort/list?type=4').then((response)=>{
        	if (response.data.msg.code == 0) {
            this.list = response.data.data
            if(this.list.length > 0){
              this.change2(this.list[0])
            }
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },

    }
	}
</script>


<style scoped >

</style>
